<template>
  <div>
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css"
    />
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"
    ></script>

    <div class="prism-player" id="player-con"></div>
  </div>
</template>

<script>
import { getPlayAuth } from '@/api/vod'
export default {
  layout: 'vue',
  name: 'Player',
  asyncData({ params }) {
    return getPlayAuth(params.vid).then(res => {
      return {
        vid: params.vid, // 视频id
        playAuth: res.data.data.playAuth // 播放凭证
      }
    })
  },
  mounted() {
    // 这块代码，可以参考阿里云的在线配置 https://player.alicdn.com/aliplayer/setting/setting.html
    var player = new Aliplayer(
      {
        id: 'player-con',
        // source: '//player.alicdn.com/video/aliyunmedia.mp4',
        vid: this.vid,
        playauth: this.playAuth,
        encryptType: 1, // 播放加密视频
        width: '100%',
        height: '500px',
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: 'hover',
        useH5Prism: true
      },
      function(player) {
        console.log('The player is created')
      }
    )
  }
}
</script>
